<template>
  <div class="container">
    <van-nav-bar fixed title="首页" />
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="img in listImg" :key="img.id">
        <img
          class="banner-img"
          :src="`http://124.223.14.236:8060/${img.advimgsrc}`"
          alt=""
        />
      </van-swipe-item>
    </van-swipe>
    <!-- 通知 -->
    <van-notice-bar
      left-icon="volume-o"
      text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"
    />
    <!-- 热门推荐 -->
    <van-cell>
      <h3 slot="title" class="group-title">热门推荐</h3>
    </van-cell>
    <recommend-list :list="listRecommmend" />
    <!-- 最近更新 -->
    <van-cell>
      <h3 slot="title" class="group-title">最近更新</h3>
      <span
        >24小时:<b>{{ listNew.num_day }}篇</b></span
      >/
      <span
        >1周:<b>{{ listNew.num_week }}篇</b>
      </span>
    </van-cell>
    <van-list
      v-model="isLoading"
      :finished="isFinised"
      finished-text="没有更多了"
      @load="newData"
      :error.sync="isError"
      error-text="加载数据错误了"
    >
      <article-list :list="listList" />
    </van-list>
  </div>
</template>
<script>
import articleList from "@/components/article-list.vue";
import RecommendList from "../components/recommend-list.vue";
import { getCateListApi, getHotListApi, getNewListApi } from "@/api/article";
export default {
  components: { articleList, RecommendList },
  data() {
    return {
      listImg: [],
      listRecommmend: [],
      listNew: [],
      listList: [],
      page: 1,
      isLoading: false,
      isFinised: false,
      isError: false,
    };
  },
  methods: {
    async indexData() {
      const { data } = await getCateListApi();
      this.listImg = data.banner;
      // 图片数据 http://124.223.14.236:8060/${icon}`
      //   console.log(data)
    },
    async hotData() {
      const {
        data: { list },
      } = await getHotListApi();
      //   console.log(list);
      this.listRecommmend = list;
    },
    async newData() {
      try {
        const { data } = await getNewListApi({
          page: this.page,
          limit: 10,
        });
        //   console.log(data);
        this.listNew = data;
        this.listList.push(...data.list.data);
        // console.log(this.listList);
        // 判断是否结束
        if (this.page >= data.list.totalPages) {
          this.isFinised = true;
        } else {
          this.page++;
        }
      } catch (error) {
        this.isError = true;
      } finally {
        // 无论成功还是失败都要关闭 loading
        this.isLoading = false;
      }
    },
  },
  created() {
    this.indexData();
    this.hotData();
    this.newData();
  },
};
</script>
<style scoped lang="less">
.banner-img {
  width: 100%;
}
.group-title {
  color: #1989fa;
}
</style>
